<template>
  <div class="container">
    <h4>应用部署管理</h4>
    <div class="filter-container">
      <el-input v-model="listQuery.appName" clearable style="width: 200px;margin-right: 10px;" class="filter-item" placeholder="应用名称"/>
      <el-select v-model="listQuery.appType" clearable filterable style="width: 200px" class="filter-item" placeholder="应用类型">
        <el-option v-for="item in typeOptions" :key="item" :label="item" :value="item"/>
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
    </div>

    <el-table v-loading="listLoading" :key="tableKey" :data="list" element-loading-text="加载中" border fit highlight-current-row style="width: 100%">
      <el-table-column :label="$t('table.id')" align="center" width="65">
        <template slot-scope="scope">
          <span>{{ scope.$index+1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="应用名称" align="center" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.appName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="应用类型" align="center" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.appType }}</span>
        </template>
      </el-table-column>
      <el-table-column label="OWNER" align="center" width="120" >
        <template slot-scope="scope">
          <span>{{ scope.row.appOwnerName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="质量负责人" align="center" width="120" >
        <template slot-scope="scope">
          <span>{{ scope.row.qualityName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="描述" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.appDesc }}</span>
        </template>
      </el-table-column>
      <el-table-column label="k8s接入情况" align="center" width="300">
        <template slot-scope="scope">
          <div v-for =" (item,index) in scope.row.deploymentList" :key="index" style="margin:10px 10px;" >
            <span >{{ item.env }}</span>
            <el-button type="primary" plain @click="handleClick(scope.row, item)" v-text="checkDeployK8s(scope.row,item.env)?'修改':'接入'"/>
          </div>
        </template>
      </el-table-column>

    </el-table>
    <div class="pagination-container">
      <el-pagination :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>

  </div>
</template>
<script>
import {
  fetchAppList,
  fetchAppTypeList
} from '@/api/build/appconfig'

export default {
  name: 'ComplexTable',
  filters: {
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        importance: undefined,
        title: undefined,
        department: undefined,
        appName: undefined,
        appType: undefined,
        sort: '+id'
      },
      sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
      offlineOptions: [{ key: 0, label: '是' }, { key: 1, label: '否' }],
      typeOptions: [],
      showReviewer: false,
      temp: {
        id: undefined
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '新增'
      },
      dialogPvVisible: false,
      pvData: [],
      downloadLoading: false
    }
  },
  created() {
    this.getAppList()
    this.getAppTypeList()
  },
  methods: {
    handleClick(row, item) {
      console.log(11111, item)
      const editParams = {}
      if (item.deployParam) {
        editParams.targetPath = item.deployParam.targetPath
        editParams.jvmOption = item.deployParam.jvmOps
        editParams.javaOption = item.deployParam.javaOps
        editParams.k8sFlag = item.deployParam.k8sFlag
      }

      if (row.appType === 'SPRING_BOOT') {
        this.$router.push({ path: 'springboot', query: { name: row.appName, appId: row.id, env: item.env, ...editParams }})
      } else if (row.appType === 'STATIC_NODE') {
        this.$router.push({ path: 'staticnode', query: { name: row.appName, appId: row.id, env: item.env, ...editParams }})
      }
    },
    checkDeployK8s(data, env) {
    //  console.log(13213123,data)
      let isDeploy = false
      data.deploymentList.forEach(item => {
        if (env === item.env) {
          isDeploy = !!item.deployParam
        }
      })
      return isDeploy
    },
    getAppList() {
      this.listLoading = true
      fetchAppList(this.listQuery).then(response => {
        this.list = response.data
        this.total = response.total
        this.listLoading = false
        console.log(response.data)
      })
    },
    getAppTypeList() {
      fetchAppTypeList().then(response => {
        this.typeOptions = response.data
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getAppList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getAppList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getAppList()
      console.log(this.getAppList())
    },

    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    }

  }
}
</script>

